<!-- CustDetailDialog.vue -->
<template>
    <el-dialog
        title="客户详情"
        :visible.sync="visible"
        width="80%"
        :close-on-click-modal="false"
        :before-close="handleClose"
        append-to-body
        v-loading="loading"
        element-loading-text="加载中..."
    >
        <el-form
            v-if="detailData"
            label-position="left"
            label-width="120px"
            class="detail-form"
        >
            <!-- 第一行 -->
            <el-row>
                <el-col :span="8">
                    <el-form-item label="客户编码：">{{ detailData.custCode }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户名称：">{{ detailData.custName }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="负责人：">{{ detailData.custManName }}</el-form-item>
                </el-col>
            </el-row>

            <!-- 第二行 -->
            <el-row>
                <el-col :span="8">
                    <el-form-item label="客户类型：">{{ detailData.custType }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="业务线：">{{ detailData.biz1 }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户来源：">{{ detailData.cusSource }}</el-form-item>
                </el-col>
            </el-row>

            <!-- 第三行 -->
            <el-row>
                <el-col :span="8">
                    <el-form-item label="渠道：">{{ detailData.cusChannel }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系方式：">{{ detailData.cusCommWay }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人：">{{ detailData.cusConnectMan }}</el-form-item>
                </el-col>
            </el-row>

            <!-- 第四行 -->
            <el-row>
                <el-col :span="8">
                    <el-form-item label="创建日期：">{{ detailData.custCreateDate }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="去年等级：">{{ detailData.lastYearLevel }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="今年等级：">{{ detailData.currYearLevel }}</el-form-item>
                </el-col>
            </el-row>

            <!-- 第五行 -->
            <el-row>
                <el-col :span="8">
                    <el-form-item label="销售额：">{{ detailData.saleAmt }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="商机创建日：">{{ detailData.oppoCreateDate }}</el-form-item>
                </el-col>
                <el-col :span="8"></el-col>
            </el-row>
        </el-form>

        <!-- 跟踪记录 -->
        <div v-if="detailData" style="margin-top: 20px;">
            <h4>跟踪记录</h4>
            <el-table
                :data="detailData.traceInfoDtoList || []"
                stripe
                border
                style="width: 100%"
                empty-text="暂无跟踪记录"
            >
                <el-table-column prop="traceTime" label="跟踪时间" width="160"></el-table-column>
                <el-table-column prop="empName" label="跟踪人" width="100"></el-table-column>
                <el-table-column prop="traceDesc" label="跟踪描述" min-width="200"></el-table-column>
                <el-table-column prop="cusMobile" label="客户手机" width="120"></el-table-column>
                <el-table-column prop="cusSource" label="来源" width="100"></el-table-column>
                <el-table-column prop="discoverMan" label="发现人" width="100"></el-table-column>
                <el-table-column prop="traceCount" label="跟踪次数" width="90"></el-table-column>
            </el-table>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'CustDetailDialog',
    props: {
        // visible: {
        //     type: Boolean,
        //     default: false
        // }
    },
    data() {
        return {
            loading: false,
            visible: false,
            detailData: null
        };
    },
    computed: {
        // localVisible: {
        //     get() {
        //         return this.visible;
        //     },
        //     set(val) {
        //         this.$emit('update:visible', val);
        //         if (!val) {
        //             this.detailData = null;
        //         }
        //     }
        // }
    },
    methods: {
        // 外部调用：this.$refs.dialog.show('CUST001')
        show(custCode) {
            if (!custCode) {
                this.$message.warning('客户编码不能为空');
                return;
            }
            this.visible = true;
            this.fetchDetail(custCode);
        },

        async fetchDetail(custCode) {
            this.loading = true;
            try {
                const { data } = await this.$http({
                    url: this.$http.adornUrl(`/crm/base/cust/allinfo/${custCode}`),
                    method: 'get',
                    params: this.$http.adornParams({}, false)
                });
                if(data){
                    this.detailData = data || {};
                }else{
                    this.$message.error('该客户还未转化，无法查询客户信息！');
                    this.visible = false;
                }
            } catch (error) {
                this.$message.error('获取客户详情失败');
                this.detailData = null;
            } finally {
                this.loading = false;
            }
        },

        handleClose() {
            // this.$emit('update:visible', false);
            this.visible = false;
        }
    }
};
</script>

<style scoped>
.detail-form >>> .el-form-item__content {
    color: #606266;
}
.detail-form .el-form-item {
    margin-bottom: 12px;
}
</style>
